<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="incloude/common::common_header(~{::meta},~{::link})"></head>
<head>
    <title>菜单编辑</title>
    <style>
        .icon-div{
            float: left;margin-top: 7px
        }
    </style>
</head>
<body>

<div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                            <ul class="layui-tab-title">
                                <li>
                                    <a th:href="${adminPath} + '/menu/list'" >菜单列表</a>
                                </li>
                                <li class="layui-this">
                                    <a href="javascript:void(0);">菜单编辑</a>
                                </li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div class="container">
                                        <div class="row" id="row" style="display: block;">
                                            <form id="inputForm" class="layui-form layui-form-pane" th:action="${adminPath} + '/menu/save'" method="post" lay-filter="component-form-group">
                                                <input name="id" id="id" th:value="${menu.id}" type="hidden" />

                                                <div class="layui-form-item">
                                                    <div class="layui-inline">
                                                        <label class="layui-form-label"><em class="gg-star">* </em>上级菜单</label>
                                                        <div class="layui-input-inline">
                                                            <input name="pid" id="selected-menu-id" th:value="${menu.pid}" type="hidden"/>
                                                            <input type="text" id="selected-menu-name" lay-verify="required" class="layui-input" readonly
                                                                   th:value="${menu.parent}?${menu.parent.name}:'顶级菜单'" />
                                                        </div>
                                                    </div>
                                                    <div class="layui-inline">
                                                        <label class="layui-form-label"><em class="gg-star">* </em>菜单名称</label>
                                                        <div class="layui-input-inline">
                                                            <input type="text" name="name" th:value="${menu.name}" lay-verify="required" class="layui-input" />
                                                        </div>
                                                    </div>
                                                    <div class="layui-inline">
                                                        <label class="layui-form-label">链接地址</label>
                                                        <div class="layui-input-inline">
                                                            <input type="text" name="href" th:value="${menu.href}" class="layui-input" />
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="layui-form-item">
                                                    <div class="layui-inline">
                                                        <label class="layui-form-label">是否显示</label>
                                                        <div class="layui-input-inline">
                                                            <input type="radio" name="isShow" value="true" title="显示" th:checked="${menu.isShow==null}?true:${menu.isShow}" />
                                                            <input type="radio" name="isShow" value="false" title="禁用" th:checked="${menu.isShow== null}?false:${!menu.isShow}" />
                                                        </div>
                                                    </div>
                                                    <div class="layui-inline">
                                                        <label class="layui-form-label"><em class="gg-star">* </em>排序</label>
                                                        <div class="layui-input-inline">
                                                            <input type="text" name="sort" th:value="${menu.sort}" lay-verify="required" class="layui-input" />
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="layui-form-item">
                                                    <div class="layui-inline">
                                                        <label class="layui-form-label">权限标识</label>
                                                        <div class="layui-input-inline">
                                                            <input type="text" name="permission" th:value="${menu.permission}" class="layui-input" />
                                                        </div>
                                                        <div class="layui-form-mid layui-word-aux">模块名-业务类名-功能名，例如bus-order-delete，多个用","拼接</div>
                                                    </div>
                                                </div>

                                                <div class="layui-form-item">
                                                    <div class="layui-inline">
                                                        <label class="layui-form-label">小图标</label>
                                                        <div class="layui-input-block">
                                                            <input type="hidden" id="icon" name="icon" th:value="${menu.icon}"  />
                                                            <div class="icon-div">
                                                                <i class="layui-icon" th:classappend="${menu.icon}"  style="margin-left: 30px;"></i>
                                                                <span class="icon-name-span" th:text="${menu.icon}"></span>
                                                            </div>
                                                            <button id="selected-icon" type="button" class="layui-btn layui-btn-normal" style="margin-left: 30px;">选择</button>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="layui-form-item layui-layout-admin">
                                                    <div class="layui-input-block">
                                                        <div class="layui-footer" style="left: 0;">
                                                            <button lay-submit class="layui-btn" lay-filter="port-form-submit">立即提交</button>
                                                            <input type="button" class="layui-btn  layui-btn-primary" onclick="history.go(-1)" value="返回">
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div th:replace="incloude/common::common_js"></div>
<div th:replace="incloude/common::layui_config"></div>
<script th:inline="javascript">
    layui.use(['layer','form'], function(){
        const layer = layui.layer;
        const form = layui.form;

        //表单验证
        form.verify();
        //监听提交
        form.on('submit(port-form-submit)', function(data){
            layer.confirm('确认提交数据？', function(index){
                layer.close(index);
                $('.layui-form').submit();
            });
            return false;
        });

        //初始判断是否为添加下级部门
        const menu = [[${menu}]];
        if (!isBlank( $('#selected-menu-id').val()) && !$.isEmptyObject(menu.parent)){
            $('#selected-menu-name').val(menu.parent.name);
        }

        //点击选择上级菜单，弹窗显示部门树形菜单
        $(document).on('click','#selected-menu-name',function () {
            layer.open({
                type: 2,
                title:'上级部门选择',
                area: ['400px', '600px'],
                shadeClose: true, //点击遮罩关闭
                content: adminPath + '/menu/menuTree'
            });
        });

        //点击选择小图标
        $(document).on('click','#selected-icon',function () {
            layer.open({
                type: 2,
                title:'图标选择',
                offset:'50px',
                area: ['846px', '700px'],
                shadeClose: true, //点击遮罩关闭
                content: adminPath + '/iconSelect'
            });
        });

    });
</script>

</body>

</html>